<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>异清轩博客</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/login.js"></script>
  <script src="js/blog.js"></script>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      /*width: 178px;*/
      height: 178px;
      display: block;
    }
    input[type=file] {
      display: none;
    }
    .msg{
      color: red;
    }
  </style>
</head>

<body class="user-select">
<div id="app">
  <mymain ref="mym" @logined="onlogin">
    <el-form ref="form" :model="article" label-width="80px">
      <el-form-item label="作者">
        <el-input v-model="article.author" :editable="false" style="width: 300px"></el-input>
        <span class="msg">{{errors.author}}</span>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="article.title" style="width: 300px"></el-input>
        <span class="msg">{{errors.title}}</span>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload style="width: 300px; display: inline-block"
                class="avatar-uploader"
                action="upload?webPath=img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
          <img v-if="article.titleImgs" :src="article.titleImgs" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span class="msg">{{errors.titleImgs}}</span>
      </el-form-item>
      <el-form-item label="内容">
<!--        <el-input type="textarea" v-model="article.content" style="width: 300px"></el-input>-->
        <span class="msg">{{errors.content}}</span>
        <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
        </script>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>
  </mymain>
</div>

<script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="js/ueditor-1.4.3.3/editor_api.js"></script>

<script type="text/javascript">
  var ue = UE.getEditor('container');
</script>

<script>
  var v = new Vue({
    el: "#app",
    data:{
      article:{author:"",title:"",titleImgs:"",content:""},
      errors:{}
    },
    methods:{
      onSubmit(){
          this.article.content = ue.getContent();
          axios.post("/myblog/article/save", this.article).then(res=>{
            this.errors = {};
            if(res.data.code){
              this.$message(res.data.msg);
            } else {
              //this.$alert(res.data.msg);
              console.info(res.data.data);
              for (let name in this.article) {
                let errMsg = res.data.data
                        .filter( err=> err.field == name )    // 过滤
                        .map( err=> err.defaultMessage)       // 转换 : {..}=>String
                        .join(",");
                this.errors[name] = errMsg;
              }
            }
          })
      },
      onlogin(user){
        this.article.author = user.name;
        this.$forceUpdate();
      },
      handleAvatarSuccess(res, file) {
        // res 不是 axios的 res , 相对 axios的 res.data
        // res.data ==> webPath
        // res.code ==> 1 or 0
        if(res.code){
          this.article.titleImgs = res.data;
          this.$forceUpdate();
        }else{
          this.$alert(res.msg);
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image')==0;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能图片格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  });
</script>

<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script>
</body>
</html>